<template>
    <div class="breadcrumb-bar">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-12">
                    <div class="breadcrumb-list">
                        <nav aria-label="breadcrumb" class="page-breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <nuxt-link to="/teacher">首页</nuxt-link>
                                </li>

                                <li class="breadcrumb-item" aria-current="page">
                                    <nuxt-link to="/teacher/student">我的学生</nuxt-link>

                                </li>
                                <li class="breadcrumb-item" aria-current="page">张小花</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-banner student-bg-blk">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-12">
                    <div class="profile-info-blk">
                        <a href="javascript:;" class="profile-info-img">
                            <img src="assets/img/students/profile-avatar.png" alt="Profile Avatar" class="img-fluid">
                        </a>
                        <h4><a href="javascript:;">张小花</a><span>Beginner</span></h4>
                        <p>学生</p>
                        <ul class="list-unstyled inline-inline profile-info-social">
                            <li class="list-inline-item">
                                <a href="javascript:;">
                                    <i class="fa-brands fa-facebook"></i>
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="javascript:;">
                                    <i class="fa-brands fa-twitter"></i>
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="javascript:;">
                                    <i class="fa-brands fa-instagram"></i>
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="javascript:;">
                                    <i class="fa-brands fa-linkedin"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="page-content course-sec">
        <div class="container">
     
            <div class="d-flex" style="justify-content: space-between;">
                <!-- <div class="owl-item">
                    <div class="instructors-widget">
                        <div class="instructors-img ">
                            <a href="instructor-list.html">
                                <img class="img-fluid" alt="" src="assets/img/cert/1.jpg">
                            </a>
                        </div>
                        <div class="instructors-content text-center">
                        
                            <h5>蓝桥青少年信息技术等级考试</h5>
                            <p>Scratch二级-优秀证书</p>
                            <div class="student-count d-flex justify-content-center">
                                <i class="fa-solid fa-user-group"></i>
                                <span>2024-04-25</span>
                            </div>
                        </div>
                    </div>
                </div> -->
                
                <div class="owl-item" v-for="i in 5" :key="i">
                    <div class="instructors-widget">
                        <div class="instructors-img">
                            <a href="instructor-list.html">
                                <img class="img-fluid" alt="" src="assets/img/user/user8.jpg">
                            </a>
                        </div>
                        <div class="instructors-content text-center">
                        
                        <h5>蓝桥青少年信息技术等级考试</h5>
                        <p>Scratch二级-优秀证书</p>
                        <div class="student-count d-flex justify-content-center">
                            <i class="fa-solid fa-user-group"></i>
                            <span>2024-04-25</span>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
                        
            <div class="row">
                <div class="col-lg-8">

                    <div class="card overview-sec">
                        <div class="card-body">
                            <h5 class="subs-title">About Me</h5>
                            <p>Very well thought out and articulate communication. Clear milestones, deadlines and fast
                                work. Patience. Infinite patience. No shortcuts. Even if the client is being careless.
                                Some quick example text to build on the card title and bulk the card's content Moltin
                                gives you platform.</p>
                            <p class="mb-0">As a highly skilled and successfull product development and design
                                specialist with more than 4 Years of My experience lies in successfully conceptualizing,
                                designing, and modifying consumer products specific to interior design and home
                                furnishings.</p>
                        </div>
                    </div>


                    <div class="card education-sec">
                        <div class="card-body">
                            <h5 class="subs-title">学习记录</h5>
                            <div class="edu-wrap" v-for="i in 5" :key="i">
                                <div class="edu-name">
                                    <span>{{ i }}</span>
                                </div>
                                <div class="edu-detail">
                                    <h6>小刺猬吃苹果</h6>
                                    <p class="edu-duration">20240310 17:30-18:30 60分钟</p>
                                    <p>主要教学的内容：小刺猬吃苹果</p>
                                </div>
                            </div>

                        </div>
                    </div>


              


                    <div class="card education-sec">
                        <div class="card-body pb-0">
                            <h5 class="subs-title">已学课程</h5>
                            <div class="row">
                                
                                <div v-for="i in 10" :key="i" class="col-lg-4 col-md-6 d-flex">
            <div class="course-box course-design d-flex ">
                <div class="product">
                    <div class="product-img">
                        <img class="img-fluid" alt="" src="assets/img/course/course-10.jpg">
                        <div class="price">
                            <h3>Scratch</h3>
                        </div>
                    </div>
                    <div class="product-content">
                        
                        <h3 class="title"><a href="course-details.html">第15届蓝桥杯真题解析</a></h3>
                        <p style="font-size: smaller;">课程介绍的内容，课程介绍的内容课程介绍的内容课程介绍的内容课程介</p>
                        <div class="course-info d-flex align-items-center">
                            <div class="rating-img d-flex align-items-center">
                                <img src="assets/img/icon/icon-01.svg" alt="">
                                <p>12个课时</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
                            </div>
                        </div>
                    </div>


                    <div class="card review-sec">
                        <div class="card-body">
                            <h5 class="subs-title">教师反馈</h5>
                            <div class="review-item" v-for="i in 5" :key="i">
                                <div class="instructor-wrap border-0 m-0">
                                    <div class="about-instructor">
                                        <div class="abt-instructor-img">
                                            <img src="assets/img/user/user1.jpg" alt="img" class="img-fluid">
                                        </div>
                                        <div class="instructor-detail">
                                            <h5>张老师</h5>
                                            <p>2024-25-14 19:30:21</p>
                                        </div>
                                    </div>
                                    <div class="rating">
                                        <i class="fas fa-star filled"></i>
                                        <i class="fas fa-star filled"></i>
                                        <i class="fas fa-star filled"></i>
                                        <i class="fas fa-star filled"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                                <p class="rev-info">最近表现很好，继续加油！</p>
                            </div>
                            
                        </div>
                    </div>


                    <div class="card comment-sec">
                        <div class="card-body">
                            <h5 class="subs-title">添加反馈</h5>
                            <form>
                                
                                
                                <div class="form-group">
                                    <textarea rows="4" class="form-control" placeholder="请输入反馈内容"></textarea>
                                </div>
                                <div class="form-group">
                                    <div class="rating">
                                        <i class="fas fa-star filled"></i>
                                        <i class="fas fa-star filled"></i>
                                        <i class="fas fa-star filled"></i>
                                        <i class="fas fa-star filled"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                                <div class="submit-section">
                                    <button class="btn submit-btn" type="submit">提交反馈</button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
                <div class="col-lg-4 theiaStickySidebar"
                    style="position: relative; overflow: visible; box-sizing: border-box; min-height: 1px;">






                    <div class="theiaStickySidebar"
                        style="padding-top: 0px; padding-bottom: 1px; position: static; transform: none; left: 1077.33px; top: 0px;">
                        <div class="card overview-sec">
                            <div class="card-body overview-sec-body">
                                <h5 class="subs-title">Professional Skills</h5>
                                <div class="sidebar-tag-labels">
                                    <ul class="list-unstyled">
                                        <li><a href="javascript:;" class="">User Interface Design</a></li>
                                        <li><a href="javascript:;">Web Development</a></li>
                                        <li><a href="javascript:;">Web Design</a></li>
                                        <li><a href="javascript:;">UI Design</a></li>
                                        <li><a href="javascript:;">Mobile App Design</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card overview-sec">
                            <div class="card-body">
                                <h5 class="subs-title" data-sider-select-id="cfac04f5-4403-458b-8198-821bc5e559b4">
                                    Contact Details</h5>
                                <div class="contact-info-list">
                                    <div class="edu-wrap">
                                        <div class="edu-name">
                                            <span><img src="assets/img/instructor/email-icon.png" alt="Address"></span>
                                        </div>
                                        <div class="edu-detail">
                                            <h6>Email</h6>
                                            <p><a href="javascript:;"><span class="__cf_email__"
                                                        data-cfemail="402a252e2e3937292c332f2e002538212d302c256e232f2d">[email&nbsp;protected]</span></a>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="edu-wrap">
                                        <div class="edu-name">
                                            <span><img src="assets/img/instructor/address-icon.png"
                                                    alt="Address"></span>
                                        </div>
                                        <div class="edu-detail">
                                            <h6>Address</h6>
                                            <p>877 Ferry Street, Huntsville, Alabama</p>
                                        </div>
                                    </div>
                                    <div class="edu-wrap">
                                        <div class="edu-name">
                                            <span><img src="assets/img/instructor/phone-icon.png" alt="Address"></span>
                                        </div>
                                        <div class="edu-detail">
                                            <h6>Phone</h6>
                                            <p> <a href="javascript:;">+1(452) 125-6789</a></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="resize-sensor"
                            style="position: absolute; inset: 0px; overflow: hidden; z-index: -1; visibility: hidden;">
                            <div class="resize-sensor-expand"
                                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;">
                                <div
                                    style="position: absolute; left: 0px; top: 0px; transition: all 0s ease 0s; width: 450px; height: 2836px;">
                                </div>
                            </div>
                            <div class="resize-sensor-shrink"
                                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;">
                                <div
                                    style="position: absolute; left: 0; top: 0; transition: 0s; width: 200%; height: 200%">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</template>
<style>
.course-info{
    border-bottom: none !important;
    padding-bottom: 0 !important
}
</style>
<script setup>
</script>
